<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">导航栏</h5>
			</div>
			<div class="card-body">
				<nav class="navbar navbar-expand-sm bg-light">

					<!-- Links -->
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="#">Link 1</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 2</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 3</a>
						</li>
					</ul>

				</nav>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">垂直导航栏</h5>
			</div>
			<div class="card-body">
				<nav class="navbar bg-light">

					<!-- Links -->
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="#">Link 1</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 2</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 3</a>
						</li>
					</ul>

				</nav>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">不同颜色导航栏</h5>
				<p>对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。</p>
			</div>
			<div class="card-body">
				<nav class="navbar navbar-expand-sm bg-light navbar-light">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>

				<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>

				<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>

				<nav class="navbar navbar-expand-sm bg-success navbar-dark">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>

				<nav class="navbar navbar-expand-sm bg-info navbar-dark">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>

				<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>

				<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>

				<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">带图标LOGO 导航</h5>
			</div>
			<div class="card-body">
				<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
					<!-- Brand/logo -->
					<a class="navbar-brand" href="#">Logo</a>

					<!-- Links -->
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="#">Link 1</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 2</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 3</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">折叠导航栏</h5>
				<p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
			</div>
			<div class="card-body">
				<nav class="navbar navbar-expand-md bg-dark navbar-dark">
					<a class="navbar-brand" href="#">Navbar</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="collapsibleNavbar">
						<ul class="navbar-nav">
							<li class="nav-item">
								<a class="nav-link" href="#">Link</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Link</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Link</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">固定导航栏</h5>
			</div>
			<div class="card-body">
				<iframe src="navbar-fixed.html" frameborder="0" style="width:100%"></iframe>
			</div>
		</div>
	</section>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</body>

</html>